<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap.css">
    
    <style>
        .touxiang{
          width: 50px; /* 或者你想要的大小 */
          height: 50px; /* 和宽度相同 */
          border-radius: 50%; /* 创建圆形 */
        }
        .col-md-3 a img{
          transition: transform 0.3s
        }
        .col-md-3 a img:hover{
          transform: scale(1.2);
        }
        .bg{
            background-color: rgba(129, 211, 248, 0.6);
        }
        li{
            list-style: none;
        }
        a:hover,a{
          text-decoration: none;
          color: black;
        }
        .jihuo{
        display: block;
      }
      body{
        color: white;
        background-image: url(images/body-bg.png);
      }
      nav{
        background-image: url(images/nav-bg.png);
        color: white;
      }
      </style>
</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="navbar-brand ">
      <a href="#" class="div1" style="text-decoration: none; color: black;">
      <img src="images/tou1.jpg" alt="" class="touxiang">
      <span id="userName"style="color: white;"></span>
    </a>
    </div>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link" href="index.html"style="color: white;">首页<span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="game.html"style="color: white;">游戏</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="community.html"style="color: white;">社区</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="More.html"style="color: white;">更多游戏</a>
        </li>
        <li class="nav-item">
            <a class="nav-link"style="color: white;"href="login.html">登录/注册</a>
          </li>
          <div class="dropdown">
            <button class="btn btn-secondary dropdown-toggle xiaLa" type="button" data-toggle="dropdown" aria-expanded="false">
              帮助
            </button>
            <div class="dropdown-menu bg-light" >
              <a class="dropdown-item" href="#">客服</a>
              <a class="dropdown-item" href="#">用户协议</a>
              <a class="dropdown-item" href="#">隐私政策</a>
            </div>
          </div>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
      </form>
    </div>
  </nav>
    <div class="container">
        <div style="display: flex;">
          <ul style="flex: 8;">
            <a href="#" >
              <li class="bg" style="display: flex;;align-items: center;margin-bottom: 10px;"id="game">
                  <img src="images/lunbo3.jpg" alt="" style="width: 150px;height: 110px; flex: 1;" >
                  <div style="display: flex; flex-flow: column;margin: 10px 0px 10px 10px;flex: 9;">
                    <h5 style="flex: 9;margin-bottom: 50px;" id="GameName">星露谷物语</h5>
                    <span style="font-size: 10px;"id="type">农场模拟&nbsp;生活模拟&nbsp;多人</span>
                  </div>
                  <div style="flex: 1; display: flex;flex-flow: column;">
                    <span style="font-size: 8px;text-decoration: line-through;;">59￥</span>
                    <p style="color: crimson;">29￥</p>
                  </div>
              </li>
            </a>
            <a href="#">
              <li class="bg" style="display: flex;;align-items: center;margin-bottom: 10px;margin-right: 20px;"id="game">
                <img src="images/g2.png" alt="" style="width: 150px;height: 110px; flex: 1;" >
                <div style="display: flex; flex-flow: column;margin: 10px 0px 10px 10px;flex: 9;">
                  <h5 style="flex: 9;margin-bottom: 50px;" id="GameName">地平线4</h5>
                  <span style="font-size: 10px;"id="type">开放世界&nbsp;汽车模拟&nbsp;竞速</span>
                </div>
                <div style="flex: 1; display: flex;flex-flow: column;">
                  <span style="font-size: 8px;text-decoration: line-through;;">299￥</span>
                  <p style="color: crimson;">49￥</p>
                </div>
            </li>
          </a>
          <a href="#">
            <li class="bg" style="display: flex;;align-items: center;margin-bottom: 10px;margin-right: 20px;"id="game">
              <img src="images/lunbo3.jpg" alt="" style="width: 150px;height: 110px; flex: 1;" >
              <div style="display: flex; flex-flow: column;margin: 10px 0px 10px 10px;flex: 9;">
                <h5 style="flex: 9;margin-bottom: 50px;"id="GameName">星露谷物语</h5>
                <span style="font-size: 10px;"id="type">农场模拟&nbsp;生活模拟&nbsp;多人</span>
              </div>
              <div style="flex: 1; display: flex;flex-flow: column;">
                <span style="font-size: 8px;text-decoration: line-through;;">59￥</span>
                <p style="color: crimson;">29￥</p>
              </div>
          </li>
        </a>
        <a href="#">
          <li class="bg" style="display: flex;;align-items: center;margin-bottom: 10px;margin-right: 20px;"id="game">
            <img src="images/lunbo3.jpg" alt="" style="width: 150px;height: 110px; flex: 1;" >
            <div style="display: flex; flex-flow: column;margin: 10px 0px 10px 10px;flex: 9;">
              <h5 style="flex: 9;margin-bottom: 50px;"id="GameName">星露谷物语</h5>
              <span style="font-size: 10px;"id="type">农场模拟&nbsp;生活模拟&nbsp;多人</span>
            </div>
            <div style="flex: 1; display: flex;flex-flow: column;">
              <span style="font-size: 8px;text-decoration: line-through;;">59￥</span>
              <p style="color: crimson;">29￥</p>
            </div>
        </li>
      </a>
      <a href="#">
        <li class="bg" style="display: flex;;align-items: center;margin-bottom: 10px;margin-right: 20px;"id="game">
          <img src="images/lunbo3.jpg" alt="" style="width: 150px;height: 110px; flex: 1;" >
          <div style="display: flex; flex-flow: column;margin: 10px 0px 10px 10px;flex: 9;">
            <h5 style="flex: 9;margin-bottom: 50px;"id="GameName">星露谷物语</h5>
            <span style="font-size: 10px;"id="type">农场模拟&nbsp;生活模拟&nbsp;多人</span>
          </div>
          <div style="flex: 1; display: flex;flex-flow: column;">
            <span style="font-size: 8px;text-decoration: line-through;;">59￥</span>
            <p style="color: crimson;">29￥</p>
          </div>
      </li>
    </a>
    <a href="#">
      <li class="bg" style="display: flex;;align-items: center;margin-bottom: 10px;margin-right: 20px;"id="game">
        <img src="images/lunbo3.jpg" alt="" style="width: 150px;height: 110px; flex: 1;" >
        <div style="display: flex; flex-flow: column;margin: 10px 0px 10px 10px;flex: 9;">
          <h5 style="flex: 9;margin-bottom: 50px;"id="GameName">星露谷物语</h5>
          <span style="font-size: 10px;"id="type">农场模拟&nbsp;生活模拟&nbsp;多人</span>
        </div>
        <div style="flex: 1; display: flex;flex-flow: column;">
          <span style="font-size: 8px;text-decoration: line-through;;">59￥</span>
          <p style="color: crimson;">29￥</p>
        </div>
    </li>
  </a>
          </ul>
          <div style="flex: 4;" class="bg" id="yulan" >
            <h4 style="margin-top: 10px;margin-left: 5px;"id="yGameName">星露谷物语</h4>
            <div style="background-color: #ccc; width: 80%;margin-left: 35px;height: 40px;font-size: 12px;">
              <p style="margin: 12px;">用户测评:<br /><span style="color: aqua;">特别好评</span>(19)</p>
              <a href="#" style="background-color: #ccc; "id="typeText">农场模拟</a>
              <a href="#" style="background-color: #ccc; "id="typeText">生活模拟</a>
              <a href="#" style="background-color: #ccc; "id="typeText">多人</a>
              <img src="images/y1.png" alt="" class="w-75 d-block" style="margin: 10px 0px;" id="yImg">
              <img src="images/y2.png" alt=""class="w-75 d-block"style="margin: 10px 0px;"id="yImg">
              <img src="images/y3.png" alt=""class="w-75 d-block"style="margin: 10px 0px;"id="yImg">
              <img src="images/y4.png" alt=""class="w-75 d-block"style="margin: 10px 0px;"id="yImg">
            </div>
          </div>
      </div>
    </div>
    <script src="js/jsCode.js"></script>
    <script src="js/base.js"></script>
</body>
</html>